<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../session.jsp"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
  	<%@ include file="../head.jsp"%>
  	<style>
  		.input-group-addon {
  			background-color: #ffffff;
  			border: 0px;
  		}
  		.alert
		{
		    display: none;
		}
  	</style>
  	<link href="assets/css/prettify.css" rel="stylesheet" />
  </head>
  <body>
  	<%@ include file="../menu.jsp"%>
	<div class="container">
		<div class="page-header">
			<h2>신규 브랜드 추가 - <small>새로운 브랜드를 추가하세요.</small></h2>
		</div>

		<form id="insertBrand" class="form-horizontal" role="form" method="post" action="listBrand.do" enctype="multipart/form-data">
			<fieldset>
			
				<div class="form-group">
					<label for="brandTitle" class="col-md-2 control-label">브랜드명</label>
					<div class="col-md-10">
						<input type="text" class="form-control" autocomplete="off" name="brandTitle" placeholder="브랜드명을 입력하세요" autofocus/>
					</div>
				</div>

				<div class="form-group">
					<label for="brandImg" class="col-md-2 control-label">로고</label>
					<div class="col-md-10">
						<input type="file" class="form-control" name="brandImg"/>
					</div>
				</div>

				<div class="form-group">
					<label for="homepage" class="col-md-2 control-label">홈페이지</label>
					<div class="col-md-10">
						<input type="text" class="form-control" name="homepage" placeholder="홈페이지 주소를 입력하세요" />
					</div>
				</div>

				<div class="form-group">
					<label for="facebook" class="col-md-2 control-label">페이스북</label>
					<div class="col-md-10">
						<input type="text" class="form-control" name="facebook" placeholder="페이스북 주소를 입력하세요" />
					</div>
				</div>
				
				<div class="form-group">
					<label for="twitter" class="col-md-2 control-label">트위터</label>
					<div class="col-md-10">
						<input type="text" class="form-control" name="twitter" placeholder="트위터 주소를 입력하세요" />
					</div>
				</div>
				
				<div class="form-group">
					<label for="kakaotalk" class="col-md-2 control-label">카카오톡</label>
					<div class="col-md-10">
						<input type="text" class="form-control" name="kakaotalk" placeholder="카카오톡 주소를 입력하세요" />
					</div>
				</div>
				
				<div class="form-group">
					<label for="youTube" class="col-md-2 control-label">유투브</label>
					<div class="col-md-10">
						<input type="text" class="form-control" name="youTube" placeholder="유투브 주소를 입력하세요" />
					</div>
				</div>
				
				<div class="form-group">
					<label for="tel1" class="col-md-2 control-label">연락처</label>
					<div class="col-md-10 input-group input-group-sm">
						<input type="number" class="form-control" name="tel1" placeholder="앞번호">
						<span class="input-group-addon">ㅡ</span>
						<input type="number" class="form-control" name="tel2" placeholder="중간번호">
						<span class="input-group-addon">ㅡ</span>
						<input type="number" class="form-control" name="tel3" placeholder="뒷번호">
					</div>
				</div>

				<div class="form-group">
					<div class="col-md-offset-2 col-md-10">
						<div class="row">
							<div class="col-md-6">
								<button type="submit" class="btn btn-primary btn-block">저장하기</button>
							</div>
							<div class="col-md-6">
								<button type="reset" class="btn btn-warning btn-block">다시작성</button>
							</div>
						</div>

					</div>
				</div>
			</fieldset>
		</form>
	</div>
	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/typehead/jquery.mockjax.js"></script>
    <script src="assets/js/typehead/bootstrap-typeahead.js"></script>
    
    <script>
    	$(function() {
    		
    		$.mockjax({
                url: '/cities/list',
                response: function() {
                	var typehead = $("input[name='brandTitle']").val();
                	var asdf = [{ name: '아나다'}, { name: 'Mark'}, { name: 'Jacob'}];
                	$.ajax({
    					url: "ajax/brandJson.jsp",
    					data: "typehead=" + typehead,
    					dataType: "text",
    					timeout: 30000,
    					cache: false,
    					async: false,
    					success: function(req) {
    						asdf = eval(req);
    					},
    					error: function(xhr, status, error) {
    						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
    					}
    				});
                    this.responseText = asdf;
                }
            });

    		$("input[name='brandTitle']").typeahead({
                ajax: '/cities/list'
            });
    	});
    </script>
    
	<!-- 형식검사 클래스 참조 -->
	<script src="assets/js/string.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#insertBrand").submit(function() {
				
				if (!$("input[name='brandTitle']").val().isValue()) {
					alert("브랜드명을 입력하세요.");
					$("input[name='brandTitle']").focus();
					return false;
				}
				
				/* var image = true;
				$("input[name='brandImg']").each(function(idx, item) {
					if (!$(item).val().isValue()) {
						alert("사진을 추가하세요.");
						$(item).focus();
						image = false;
					}
				});
				if (!image) {
					return false;
				} */
				
				if ($("input[name='homepage']").val().isValue()) {
					if (!$("input[name='homepage']").val().isUrl()) {
						alert("홈페이지의 형식에 맞지 않습니다.");
						$("input[name='homepage']").focus();
						return false;
					}
				}
				
				if ($("input[name='facebook']").val().isValue()) {
					if (!$("input[name='facebook']").val().isUrl()) {
						alert("페이스북 주소 형식에 맞지 않습니다.");
						$("input[name='facebook']").focus();
						return false;
					}
				}
				
				if ($("input[name='twitter']").val().isValue()) {
					if (!$("input[name='twitter']").val().isUrl()) {
						alert("트위터 주소 형식에 맞지 않습니다.");
						$("input[name='twitter']").focus();
						return false;
					}
				}
				
				if ($("input[name='youTube']").val().isValue()) {
					if (!$("input[name='youTube']").val().isUrl()) {
						alert("유투브 주소 형식에 맞지 않습니다.");
						$("input[name='youTube']").focus();
						return false;
					}
				}
				
				/*if (!$("input[name='tel1']").val().isValue()) {
					alert("연락처 앞번호를 입력하세요.");
					$("input[name='tel1']").focus();
					return false;
				}
				
				if (!$("input[name='tel1']").val().isNumber()) {
					alert("연락처 앞번호는 숫자로만 입력이 가능합니다.");
					$("input[name='tel1']").focus();
					return false;
				}
				
				if (!$("input[name='tel2']").val().isValue()) {
					alert("연락처 중간번호를 입력하세요.");
					$("input[name='tel2']").focus();
					return false;
				}
				
				if (!$("input[name='tel2']").val().isNumber()) {
					alert("연락처 중간번호는 숫자로만 입력이 가능합니다.");
					$("input[name='tel2']").focus();
					return false;
				}
				
				if (!$("input[name='tel3']").val().isValue()) {
					alert("연락처 뒷번호를 입력하세요.");
					$("input[name='tel3']").focus();
					return false;
				}
				
				if (!$("input[name='tel3']").val().isNumber()) {
					alert("연락처 뒷번호는 숫자로만 입력이 가능합니다.");
					$("input[name='tel3']").focus();
					return false;
				}*/
				
				if (!confirm("정말 등록하시겠습니까?")) {
					return false;
				}
			});
		});
	</script>
  </body>
</html>